<template>
    <div class="main">
        <van-list :immediate-check="false" v-model="loading" :finished="finished" @load="getFav" finished-text="没有更多了">
            <van-swipe-cell v-for="item in favList" :key="item._id">
                <van-card currency="" price="" :title="item.title" :thumb="item.imageSrc[0]">
                    <template #tags>
                        <span>分类：{{ item.cate_name }}</span>
                    </template>
                    <template #price-top>
                        <span>作者：{{ item.author }}</span>
                    </template>
                </van-card>

                <template #right>
                    <van-button square text="删除" @click="cancelFav(item)" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
        </van-list>
    </div>
</template>

<script>
import { SwipeCell, Card, Button, List } from 'vant';
export default {
    data() {
        return {
            skip: 0,
            limit: 10,
            favList: [],
            loading: false,
            finished: false
        }
    },
    props: {
        API: {
            required: true,
            type: Function,
        },
        cancelAPI: {
            required: true,
            type: Function,
        },
        params: {
            type: Object,
        },

    },
    computed: {
    },
    components: {
        [SwipeCell.name]: SwipeCell,
        [Card.name]: Card,
        [Button.name]: Button,
        [List.name]: List,
    }, created() {
        this.getFav()
    },

    methods: {

        cancelFav(item) {
            let _id = item._id
            let article_id = item._id
            let { params } = this
            this.cancelAPI({
                article_id, ...params, _id
            }).then(res => {
                if (res.code == 0) {
                    this.skip = 0
                    this.favList = []
                    this.loading = true
                    this.$toast(res.msg)
                    this.getFav()
                }
            })
        },
        // 获取列表
        getFav() {
            let {
                skip, limit, params
            } = this
            this.API({
                ...params, skip, limit
            }).then(res => {
                if (res.code == 0) {
                    let count = res.count
                    this.favList.push(...res.data)
                    this.skip = this.favList.length
                    if (this.favList.length == 0) {
                        this.$emit('show')
                    }
                    if (this.favList.length >= count) {
                        this.finished = true
                    } else {
                        this.loading = false
                    }
                } else if (res.code == 1) {
                    this.favList = []
                    this.$bus.$emit('null')


                }
            })
        }
    },
}
</script>

<style scoped>
.goods-card {
    margin: 0;
    background-color: #fff;
}

.delete-button {
    height: 100%;
}
</style>